<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html lang="en">
	<head>
		<!-- Head Load -->
		<jsp:include page="common/LoadHead.jsp"></jsp:include>
	    <title>大屯小卖部 - ShoppingCart Page</title>
	</head>
	<body>
	    <div class="bw">
	        <div class="fu">
	            <div class="ge aom">
	                <nav class="aot">
	                	<!-- Logo Image Load -->
	                    <jsp:include page="common/LoadLogoImage.jsp"></jsp:include>
	                    <div class="collapse and" id="nav-toggleable-sm">
	                        <ul class="nav of nav-stacked" style="text-align:center;">
	                            <li class="tq">Dashboards</li>
	                            <li><a href="/mypage">Overview</a></li>
	                            <li><a href="/order/page/1">Orders</a></li>
	                            <li class="active"><a href="/shoppingcart">Shopping Cart</a></li>
	                            <li><a href="#">My Address</a></li>
	                            <li class="tq">More</li>
	                            <li><a href="#">New Product</a></li>
	                            <li><a href="#">Contact DTXMB</a></li>
	                        </ul>
	                        <hr class="rw aky">
	                    </div>
	                </nav>
	            </div>
	            <div class="hc aps">
	                <div class="apa">
	                    <div class="apb">
	                        <!-- <h6 class="apd"></h6> -->
	                        <h2 class="apc">ShoppingCart</h2>
	                    </div>
	                    
	                </div>
	                <div class="anv alg ala">
                    	<h3 class="anw anx">ShoppingCart List</h3>
                	</div>
	                
	                <div class="ud">
    					<div class="eg">
        					<table class="cl" data-sort="table" style="text-align:center;">
					            <thead>
					                <tr>
					                    <th style="text-align:center;" class="header"></th>
					                    <th style="text-align:center;" class="header">Product</th>
					                    <th style="text-align:center;" class="header">Number</th>
					                    <th style="text-align:center;" class="header">Price</th>
					                    <th style="text-align:center;" class="header">Total</th>
					                </tr>
					            </thead>
            					<tbody>
            						<c:forEach var="st" items="${shoppingcart}">	
						                <tr>
						                	<td><img style="border-radius: 50%;vertical-align: middle;border: 0;" src="${st.image}" height="36" width="36" /></td>
						                    <td style="font-size:16px;vertical-align: middle;">${st.name}</td>
						                    <td style="font-size:16px;vertical-align: middle;">${st.productnumber}</td>
						                    <td style="font-size:16px;vertical-align: middle;">$${st.price}</td>
						                    <td style="font-size:16px;vertical-align: middle;">$${st.price} * ${st.productnumber}</td>
						                </tr>
					                </c:forEach>
            					</tbody>
        					</table>
        					
        					<hr class="aky">
        					<div class="ob ape" style="margin-top: -15px;font-size:20px;font-weight:700">
	                        	<div class="tn aol" style="width:auto;">123</div>
	                    	</div>
        					<form action="/order/make" method="POST">
        						<c:forEach var="st" items="${shoppingcart}" varStatus="status">	
        							<input type="hidden" value="${st.productnumber}" name="query[${status.index}].productnumber" />
        							<input type="hidden" value="${st.customid}" name="query[${status.index}].customid" />
        							<input type="hidden" value="${st.productid}" name="query[${status.index}].productid" />
        							<input type="hidden" value="${st.price}" name="query[${status.index}].price" />
        						</c:forEach>
				            	<input class="ce apn ame" type="submit" value="Make Order" />
				          	</form>
        					
    					</div>
	            	</div>
	        	</div>
	    	</div>
	    </div>
	    <!-- JavaScript Load -->
	    <jsp:include page="common/LoadJavaScript.jsp"></jsp:include>
	</body>
</html>